<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="模板名称" prop="tempName">
            <el-input v-model="queryParams.tempName" placeholder="请输入模板名称" clearable style="width: 150px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="模板类型" prop="tempTid">
            <el-select
               v-model="queryParams.tempTid"
               placeholder="请输入模板类型"
               clearable
               style="width: 150px"
            >
            <el-option v-for="item in tempType" :key="item.tid" :label="item.typeName" :value="item.tid" />

            </el-select>
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 100px">
               <el-option label="公有" value="0" />
               <el-option label="私有" value="1" />
               <!-- <el-option
                  v-for="template in sys_normal_disable"
                  :key="template.value"
                  :label="template.label"
                  :value="template.value"
               /> -->
            </el-select>
         </el-form-item>
         <el-form-item label="创建时间" style="width: 308px">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
               start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">

         <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="模板编号" align="center" prop="id" />
         <el-table-column label="模板名称" align="center" prop="tempName" :show-overflow-tooltip="true" />
         <el-table-column label="模板文件路径" align="center"  :show-overflow-tooltip="true" >
            <template #default="scope">
               <router-link :to="scope.row.address" class="link-type">
                  <span>{{ scope.row.address }}</span>
               </router-link>
            </template>
         </el-table-column>
         
         <el-table-column label="模板类型" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
               <router-link to="#" class="link-type"
                  v-for="item in tempType">
                  <span v-if="scope.row.tempTid == item.tid">{{ item.typeName }}</span>
               </router-link>
            </template>
         </el-table-column>
         <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
               
               <dict-tag :options="sys_normal_disable" v-text="scope.row.status === '0' ? '公有' : '私有'" />
            </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" />
         <el-table-column label="创建时间" align="center" prop="createDate" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createDate) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
         @pagination="getList" />
   

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="template" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="模板名称" prop="tempName">
               <el-input v-model="form.tempName" placeholder="请输入模板名称" />
            </el-form-item>
            
            <el-form-item label="文件地址" prop="address">
               <el-upload action="#" :show-file-list="false" :http-request="requestUpload"
                  :accept="'.jpg,.png,.jpeg'">
                  <img v-if="form.address" :src="form.address" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                     <Plus />
                  </el-icon>
               </el-upload>
            </el-form-item>

            <el-form-item label="模板类型" prop="tempTid">
               <el-select v-model="form.tempTid" placeholder="" clearable style="width: 240px">
                  <el-option v-for="item in tempType" :key="item.tid" :label="item.typeName" :value="item.tid" />
               </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
               <el-select v-model="form.status" placeholder="" clearable style="width: 240px">

                  <el-option label="公有" value="0" />
                  <el-option label="私有" value="1" />
               </el-select>
            </el-form-item>
            <!-- <el-form-item label="字典类型" prop="dictType">
               <el-input v-model="form.tid" placeholder="请输入字典类型" />
            </el-form-item> -->
            <!-- <el-form-item label="状态" prop="status">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item> -->
            <el-form-item label="备注" prop="remarks">
               <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
      <!-- 文件裁剪 -->
      <el-dialog title="裁剪头像" v-model="imgOpen" width="800px" append-to-body>
            <el-row>
                <el-col :xs="24" :md="12" :style="{ height: '350px' }">
                    <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop"
                        :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
                        :fixedBox="options.fixedBox" :outputType="options.outputType" @realTime="realTime" v-if="true" />
                </el-col>
                <el-col :xs="24" :md="12" :style="{ height: '350px' }">
                    <div class="avatar-upload-preview">
                        <img :src="options.previews.url" :style="options.previews.img" />
                    </div>
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :lg="{ span: 1, offset: 2 }" :md="2">
                    <el-button icon="Plus" @click="changeScale(1)"></el-button>
                </el-col>
                <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="Minus" @click="changeScale(-1)"></el-button>
                </el-col>
                <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
                </el-col>
                <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
                </el-col>
                <el-col :lg="{ span: 1, offset: 2 }" :md="2">
                </el-col>
                <el-col :lg="{ span: 2, offset: 6 }" :md="2">
                    <el-button type="primary" @click="handleCropper">确认</el-button>
                </el-col>
            </el-row>
        </el-dialog>
   </div>
</template>

<script  setup name="template">
   import "vue-cropper/dist/index.css";
	import { VueCropper } from "vue-cropper";


const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

import { listTemplate, getTemplate, addTemplate, delTemplate, updateTemplate, tempFileAddress } from "@/api/system/template/data"

import { listTempType } from "@/api/system/template/type";
// import {type} from "@/view/template/type/index"

const templateList = ref([]);
const open = ref(false);
const imgOpen = ref(false)
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const tempType = ref([])


const data = reactive({
   form: {},
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      tempName: undefined,
      address: undefined,
      tempTid: undefined,
      // dictType: undefined,
      status: undefined,
      images: undefined
   },
   rules: {
      tempName: [{ required: true, message: "，模板名称不能为空", trigger: "blur" }],
      address: [{ required: true, message: "文件不能为空", trigger: "blur" }],
      tempTid: [{ required: true, message: "模板类型不嫩为空",trigger: "blur"}]

   },
});

const { queryParams, form, rules } = toRefs(data);

/** 覆盖默认上传行为 */
function requestUpload(option) {
   console.log(option)
		const sufixIndex = option.file.name.lastIndexOf(".");
		const sufix = option.file.name.substring(sufixIndex);
		if (sufix != ".jpg" && sufix != ".png" && sufix != ".jpeg") {
			proxy.$modal.msgError("文件类型错误");
			return;
		}
		const reader = new FileReader();
		reader.readAsDataURL(option.file);
		reader.onload = () => {
			options.img = reader.result;
		}
		imgOpen.value = true;
}
   	//图片裁剪数据
const options = reactive({
   img: form.value.address, // 裁剪图片的地址
   autoCrop: true, // 是否默认生成截图框
   autoCropWidth: 200, // 默认生成截图框宽度
   autoCropHeight: 200, // 默认生成截图框高度
   fixedBox: true, // 固定截图框大小 不允许改变
   outputType: "png", // 默认生成截图为PNG格式
   previews: {} //预览数据
});
/* 处理裁剪 */
function handleCropper() {
		proxy.$refs.cropper.getCropBlob(data => {
			const reader = new FileReader();
			reader.readAsDataURL(data)
			reader.onload = () => {
				form.value.address = reader.result;
			}
		});
		imgOpen.value = false;
	}
	/** 向左旋转 */
	function rotateLeft() {
		proxy.$refs.cropper.rotateLeft();
	}
	/** 向右旋转 */
	function rotateRight() {
		proxy.$refs.cropper.rotateRight();
	}
	/** 图片缩放 */
	function changeScale(num) {
		num = num || 1;
		proxy.$refs.cropper.changeScale(num);
	}
	/** 实时预览 */
	function realTime(data) {
		options.previews = data;
	}
//文件上传截止

//获取模板类型数据的方法
function getList() {
   loading.value = true;
   listTemplate(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
      console.log(queryParams.value+"-------"+dateRange.value)
      templateList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   });

}
//获取模板类型信息
function getTypeList() {
   listTempType(proxy.addDateRange).then(response => {
      tempType.value = response.rows
   })

}


/** 刷新缓存按钮操作 */
function handleRefreshCache() {
   refreshCache().then(() => {
      proxy.$modal.msgSuccess("刷新成功");
      useDictStore().cleanDict();
   });
}
/** 取消按钮 */
function cancel() {
   open.value = false;
   reset();
}
/** 表单重置 */
function reset() {
   form.value = {
      id: undefined,
      tempName: undefined,
      tempTid: undefined,
      address: undefined,
      status: undefined,
      remarks: undefined
   };
   proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}
/** 点击修改将获取到的数据给到修改页面并打开*/
function handleUpdate(row) {
   reset()
   console.log(row.id)
   const id = row.id || ids.value;
   getTemplate(id).then(response => {
      console.log(response)
      form.value = response.data
      queryParams.value.address = form.value.address
      open.value = true
      title.value = '修改模板类型'
   })
}
/**点击新增 */
function handleAdd() {
   reset();
   open.value = true;
   queryParams.value.address = undefined
   title.value = "新增模板信息"
}


/**点击确认按钮事件 */
function submitForm() {
   proxy.$refs["template"].validate(valid => {

      /**判断是修改还是新增 */
      if (valid) {
         console.log(form.value)
         if (form.value.id != undefined) {
            updateTemplate(form.value).then(response => {
               proxy.$modal.msgSuccess("修改成功")
               open.value = false;
               getList();
            })
         } else {
            addTemplate(form.value).then(response => {
               proxy.$modal.msgSuccess("新增成功")
               open.value = false;
               getList();
            })
         }
      }
   })
}
/**多选框事件 */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id)
   multiple.value = !selection.length;
   single.value = !selection.length;
}

function handleDelete(row) {
   const tempIds = row.id || ids.value;
   proxy.$modal.confirm("确定要删除" + tempIds + "的信息吗").then(function () {
      return delTemplate(tempIds);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { })
}
getList();
getTypeList();
watch(() =>
   form.value.tempTid, (newValue, oldValue) => {
      console.log(newValue + "-----" + oldValue)
   }
)


</script>

<style scoped>
   .avatar {
      width: 150px;
      height: 150px;
      border-radius: 10px;
   }

</style>